import { NavLink } from "react-router-dom";
import styled from "styled-components";
import HomeIcon from "@mui/icons-material/Home";
import EqualizerIcon from "@mui/icons-material/Equalizer";
import PersonIcon from "@mui/icons-material/Person";
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
import AssessmentOutlinedIcon from '@mui/icons-material/AssessmentOutlined';
import TagFacesOutlinedIcon from '@mui/icons-material/TagFacesOutlined';
import { useNavigate ,useParams,useLocation} from "react-router";
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';

import { useEffect, useState } from "react";
import { ThemeProvider } from '@mui/material/styles';
import {bottombartheme} from '../themes'
/**
 * /money 
 * /statistics
 * /tags
 * @returns 
 */
const BottomBar = () => {
  const bottomName=['/money','/statistics','/tags']
  const navigate = useNavigate()

  let location = useLocation()
  useEffect(() => {
    if (bottomName.indexOf(location.pathname) >= 0) {
      setValue(location.pathname)
    }
    if (location.pathname === '/') {
      setValue('/money')
    }
    
  },[location])
  const [value, setValue] =useState('money');
  console.log(location);
  
  const handleChange = (event:any, newValue:string) => {
    setValue(newValue);
    navigate(newValue)
  };
return  (
  <ThemeProvider theme={bottombartheme}>
  <BottomNavigation sx={{ width: '100%' }} value={value} onChange={handleChange} showLabels>
  <BottomNavigationAction
    label="首页"
      value="/money"
    icon={<HomeOutlinedIcon />}
  />
  <BottomNavigationAction
    label="统计"
    value="/statistics"
    icon={<AssessmentOutlinedIcon />}
  />
  <BottomNavigationAction
    label="个人"
    value="/tags"
    icon={<TagFacesOutlinedIcon />}
  />
    </BottomNavigation>
    </ThemeProvider>
  )
};




export default BottomBar;
/**
 * <svg t="1638238600664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2320" width="200" height="200"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z" p-id="2321"></path></svg>
 * 
 * 
 */